<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>多列等高布局</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            color: #f00;
        }

        .container {
            margin: 0 auto;
            width: 300px;
            border: 3px solid #00C;
            overflow: hidden;
        }

        .left {
            float: left;
            width: 150px;
            background: #B0B0B0;
            padding-bottom: 2000px;
            margin-bottom: -2000px;
        }

        .right {
            float: left;
            width: 150px;
            background: #6CC;
            padding-bottom: 2000px;
            margin-bottom: -2000px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right right right right right right right right right right right right right right right
            right right right right right right right right right right right right</div>
    </div>
</body>

</html>